<template>
  <app-layout title="客户档案">
    <div class="customer-container p-2">
      <div class="customer-container-title">
        <el-button type="primary" @click="addClick">新增客户</el-button>
      </div>
      <el-table :data="customers" stripe style="width: 100%">
        <el-table-column fixed  type="index" label="序号" width="50" />
        <el-table-column prop="name" label="姓名" width="180" />
        <el-table-column prop="sex" label="性别" width="70">
          <template #default="scope">

            <el-tag v-if="scope.row.sex == '男'">{{ scope.row.sex }}</el-tag>
            <el-tag type="danger" v-else-if="scope.row.sex == '女'">{{ scope.row.sex }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="age_range" label="年龄段" />
        <el-table-column prop="phone" label="联系电话" width="150" />
        <el-table-column prop="wechat" label="微信" />
        <el-table-column prop="is_member" label="是否会员">
          <template #default="scope">
            <el-tag v-if="scope.row.is_member">是</el-tag>
            <el-tag type="danger" v-else>否</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="address" label="住址" />
        <el-table-column prop="contact" label="对接人" />
        <el-table-column prop="favourite" label="喜好" />
        <el-table-column prop="hate" label="忌口" />
        <el-table-column prop="industry" label="行业" />
        <el-table-column fixed="right" label="操作" width="180">
          <template #default="scope">
            <el-button :icon="Search" circle></el-button>
            <el-button
              type="primary"
              :icon="Edit"
              @click="editClick(scope.row)"
              circle
            ></el-button>
            <el-button type="danger" :icon="Delete" circle @click="delClick(scope.row.id)"></el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 弹出表单 -->
      <el-dialog
        v-model="dialogFormVisible"
        :title="editType === '0' ? '编辑客户' : '新增客户'"
        width="40%"
      >
        <el-form :model="form" ref="ruleForm" :rules="rules">
          <el-form-item label="姓名" :label-width="labelWidth" prop="name">
            <el-input v-model="form.name" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="性别" :label-width="labelWidth">
            <el-select v-model="form.sex">
              <el-option label="男" value="男" />
              <el-option label="女" value="女" />
            </el-select>
          </el-form-item>
          <el-form-item label="年龄段" :label-width="labelWidth">
            <el-input v-model="form.age_range" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="联系电话" :label-width="labelWidth" prop="phone">
            <el-input v-model="form.phone" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="微信" :label-width="labelWidth">
            <el-input v-model="form.wechat" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="是否会员" :label-width="labelWidth">
            <el-tooltip
              :content="form.is_member === '0' ? '否' : '是'"
              placement="top"
            >
              <el-switch
                v-model="form.is_member"
                active-color="#13ce66"
                inactive-color="#ff4949"
                active-value="1"
                inactive-value="0"
              />
            </el-tooltip>
          </el-form-item>
          <el-form-item label="住址" :label-width="labelWidth">
            <el-input v-model="form.address" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="对接人" :label-width="labelWidth">
            <el-input v-model="form.contact" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="喜好" :label-width="labelWidth">
            <el-input v-model="form.favourite" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="忌口" :label-width="labelWidth">
            <el-input v-model="form.hate" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="行业" :label-width="labelWidth">
            <el-input v-model="form.industry" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取消</el-button>
            <el-button type="primary" @click="submitForm('ruleForm')"
              >保存</el-button
            >
          </span>
        </template>
      </el-dialog>
    </div>
  </app-layout>
</template>
<script>
import { reactive, ref } from "vue";
import AppLayout from "@/Layouts/AppLayout.vue";
import { Search, Edit, Delete } from "@element-plus/icons";
import { ElMessage, ElMessageBox } from "element-plus";
import { Inertia } from "@inertiajs/inertia";
export default {
  name: "Customer",
  props: ["customers"],
  components: {
    AppLayout,
  },
  setup(props) {
    let dialogFormVisible = ref(false);
    // 用于初始化的form
    const configerForm = {
      id: null,
      name: null,
      sex: null,
      age_range: null,
      phone: null,
      wechat: null,
      is_member: false,
      address: null,
      contact: null,
      favourite: null,
      hate: null,
      industry: null,
    };
    let form = reactive({
      id: null,
      name: null,
      sex: null,
      age_range: null,
      phone: null,
      wechat: null,
      is_member: false,
      address: null,
      contact: null,
      favourite: null,
      hate: null,
      industry: null,
    });
    // 表单验证
    const rules = {
      name: [
        {
          required: true,
          message: "姓名不能为空",
          trigger: "blur",
        },
      ],
      phone: [
        {
          required: true,
          message: "手机号不能为空",
          trigger: "blur",
        },
      ],
    };
    const labelWidth = "100px";
    // 是编辑还是新增
    const editType = ref("");
    /**
     * @description 编辑操作
     **/
    function editClick(userMsg) {
      dialogFormVisible.value = true;
      editType.value = "0";
      for (let key in userMsg) {
        form[key] = userMsg[key];
      }
    }
    /**
     * @description 新增操作
     **/
    function addClick() {
      for (let key in configerForm) {
        form[key] = configerForm[key];
      }
      form.id = null
      editType.value = "1";
      dialogFormVisible.value = true;
    }
    /**
     * @description 删除操作
     **/
    function delClick(id) {
      let data = {
        id: id,
      }
      ElMessageBox.confirm(
        '确定删除该用户?',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }
      )
        .then(() => {
          ElMessage({
            type: 'success',
            message: '删除成功',
          })
          Inertia.delete(`/customer?id=${id}`);
        })
        .catch(() => {
        })
    }
    return {
      form,
      editClick,
      addClick,
      Search,
      Edit,
      Delete,
      editType,
      dialogFormVisible,
      labelWidth,
      rules,
      delClick
    };
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          Inertia.post("/customer", this.form);
          ElMessage({
            message: "修改成功",
            type: "success",
          })
          this.dialogFormVisible = false;
        } else {
          return false;
        }
      });
    },
  },
};
</script>

<style scoped>
.customer-container-title {
  text-align: right;
  margin: 10px 10px;
}
</style>
